<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-05-06 10:53:00
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-05-07 10:42:06
 * @FilePath: \Webgl-basic\1.webgl快速体验.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>8.三角形平移.html</title>
    <style>
        canvas {
            display: block;
            margin: 0 auto;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <canvas width="400" , height="400"></canvas>
    <script type="text/javascript" src="./lib/index.js"></script>
    <script type="text/javascript" src="./lib/li-gui.js"></script>
    <script>
        const canvas = document.querySelector('canvas')
        //获取webgl上下文
        const gl = canvas.getContext('webgl')
        //定义点顶点着色器(字符串)
        const vs_shader = /*glsl*/ `
          // 指定浮点数精度为中等精度  
          precision mediump float;//glsl语法每一行后面都要加上分号,每一行后面都要加上分号
          attribute vec4 a_Position;
          //定义一个偏移量
          attribute vec2 a_Offset;
          //glsl语法中,必须有一个入口函数main shaderToy里面叫mainImage cesuim里面可能叫czm_Main
          void main(){
            vec2 positionVec2 =  a_Position.xy + a_Offset;
            //gl_Position 是最后输出的坐标值,Vect4是四维向量,具有四个分量,每一个分量都是float
            gl_Position=vec4(positionVec2,0.0,1.0);

          }`
        const fs_shader = /*glsl*/ `
        precision mediump float;
        void main(){
            //gl_FragColor是最后输出的像素颜色,是一个四维的数据
            gl_FragColor = vec4(1.0,0.0,0.0,1.0);            
        }`
        //编译着色器,生成程序对象
        const program = initShader(gl, vs_shader, fs_shader)
        gl.program = program
        let points = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5])


        //获取a_Offset在着色器中的位置
        const a_Offset = gl.getAttribLocation(program, 'a_Offset');
        const n = createBufferTriangle(gl, points)
        //应以GUi
        const GUI = lil.GUI;
        const gui = new GUI()
        //定义一个偏移量数据
        const offset = {
            x: 0,
            y: 0,
        }

        gl.drawArrays(gl.TRIANGLES, 0, n)
        const onChangeOffset = () => {
            //a_Offset赋值
            gl.vertexAttrib2f(a_Offset, offset.x, offset.y)
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.drawArrays(gl.TRIANGLES, 0, n)
        }

        gui.add(offset, 'x', -0.5, 0.5, 0.01).onChange(onChangeOffset)
        gui.add(offset, 'y', -0.5, 0.5, 0.01).onChange(onChangeOffset)

        // const a_Position = gl.getAttribLocation(program,'a_Position')
        // gl.clear(gl.COLOR_BUFFER_BIT)
        // //创建缓冲区
        // const buffer = gl.createBuffer()
        // //给定缓冲区的用途
        // gl.bindBuffer(gl.ARRAY_BUFFER,buffer)
        // //向ARRY_BUFFER中写入数据
        // gl.bufferData(gl.ARRAY_BUFFER,points,gl.STATIC_DRAW)
        //指定gpu如何去缓冲区中取值
        // target,大小,数据类型,是否归一化,步长,偏移值
        // gl.vertexAttribPointer(a_Position,2,gl.FLOAT,false,2*4,0)
        // gl.enableVertexAttribArray(a_Position)        
        // //执行绘制
        // gl.drawArrays(gl.TRIANGLES,0,3)
        createBufferTriangle(gl, points)
    </script>
</body>

</html>